import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd-mobile'
import Exchange from './exchange';
import Card from './Card';
import '../style/view.css'

export default React.memo(function ViewTabs() {

    const [data, getData] = useState<any>([])

    const getDatas = async () => {
        // const res = await getShop()
        let res = JSON.parse(sessionStorage.getItem('details') || '[]') || []
        console.log(res);
        getData(res)
    }

    useEffect(() => {
        getDatas()
    }, [])

    return (
        <div>
            <Tabs>
                <Tabs.Tab title='全部' key='all'>
                    {
                        data.map((item: any, index: number) => {
                            return (
                                <Card item={item} key={index} />
                            )
                        })
                    }
                </Tabs.Tab>

                <Tabs.Tab title='待兑换' key='exchange'>
                    {
                        data.map((item: any, index: number) => {
                            return (
                                <div key={index}>
                                    {
                                        item.data == 1 ? <Exchange item={item} key={item._id} /> : null
                                    }
                                </div>
                            )
                        })
                    }
                </Tabs.Tab>

                <Tabs.Tab title='待收货' key='Deliver'>
                    {
                        data.map((item: any, index: number) => {
                            return (
                                <div key={index}>
                                    {
                                        item.data == 2 ? <Exchange item={item} key={item._id} /> : null
                                    }
                                </div>
                            )
                        })
                    }
                </Tabs.Tab>

                <Tabs.Tab title='已取消' key='cancel'>
                    {
                        data.map((item: any, index: number) => {
                            return (
                                <div key={index}>
                                    {
                                        item.data == 3 ? <Exchange item={item} key={item._id} /> : null
                                    }
                                </div>
                            )
                        })
                    }
                </Tabs.Tab>

                <Tabs.Tab title='已完成' key='finish'>
                    {
                        data.map((item: any, index: number) => {
                            return (
                                <div key={index}>
                                    {
                                        item.data == 4 ? <Exchange item={item} key={item._id} /> : null
                                    }
                                </div>
                            )
                        })
                    }
                </Tabs.Tab>
            </Tabs>
        </div>
    )
})
